<template>
  <div class="padding-trbl-20 margin-b-60">
    <!-- 条件筛选 -->
    <div class="searchBox rela flex-row row-between margin-b-20">
      <div class="search_l_bg abso bg-themecolor"></div>
      <div class="search_l">
        <div class="searchItem flex-row">
          <div class="flex-row font-14">
            选择年份：
            <el-date-picker
              v-model="selectTimeVal"
              type="year"
              value-format="yyyy"
              placeholder="选择年"
              :picker-options="pickerOptions"
              @change="timeValChange"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
    </div>

    <div class="moude1">
      <div class="flex-row width100">
        <div class="card1 margin-r-20">
          <el-card>
            <Title title="本年工单办理量统计"></Title>
            <div class="flex-row card1Content margin-t-20 padding-l-30">
              <div class="card1Content_l text-gray margin-r-50 pointer rela">
                <div @click="orderListChange('year')">
                  工单办理总量
                  <div class="font-46 margin-b-20 margin-t-10 text-black">
                    {{ card1Data.total.count }}
                    <span class="font-14 text-gray">件</span>
                  </div>
                  <lineProgress
                    :title="
                      card1Data.total.add
                        ? '环比去年' + lastMonth + '月增长'
                        : '环比去年' + lastMonth + '月下降'
                    "
                    :percentage="
                      card1Data.total.count == 0
                        ? 0
                        : card1Data.total.percentage >= 100
                        ? 100
                        : card1Data.total.percentage
                    "
                    :showtext="false"
                    :showtextVal="
                      card1Data.total.count == 0 ? 0 : card1Data.total.huanbiPct
                    "
                    :icon="card1Data.total.add ? 'rise' : 'decline'"
                    percentageColor="#ff00f0"
                    titleColor="#409EFF"
                  ></lineProgress>
                </div>
                <div class="line abso bg-light-gray"></div>
              </div>
              <div class="card1Content_r rela padding-l-50">
                <div class="card1Line abso"></div>
                <div class="card1DataList">
                  <div
                    class="card1DataItem pointer"
                    v-for="(item, index) in card1Data.list"
                    :key="index"
                    @click="orderListChange('year', item.title)"
                  >
                    <template
                      v-if="item.type != 'SHUJI' && item.type != 'SHIZHANG'"
                    >
                      <div
                        class="font-16 text-gray"
                        :class="index > 0 ? ' margin-t-10' : ''"
                      >
                        {{ item.title }}
                      </div>
                      <div class="flex-row">
                        <el-progress
                          :show-text="false"
                          :stroke-width="10"
                          :percentage="
                            item.percentage >= 100 ? 100 : item.percentage
                          "
                        ></el-progress>
                        <div
                          class="margin-l-20 text-right flex-row progressInfo"
                        >
                          <div class="company">{{ item.number }} 单</div>
                          <div class="margin-l-20 proportion">
                            占比：
                            <span class="line-block"
                              >{{
                                item.number > 0 ? item.proportion : 0
                              }}%</span
                            >
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="card2">
          <el-card class="rela">
            <Title title="工单办理内容统计"></Title>
            <div class="text-gray font-12 company abso">单位：件</div>
            <div
              class="year_card2Echart margin-t-50"
              id="year_card2Echart"
            ></div>
          </el-card>
        </div>
      </div>
      <div class="flex-row margin-t-20 width100 card4">
        <el-card class="rela">
          <Title title="部门办理量统计"></Title>
          <div class="text-gray font-12 company abso">单位：件</div>
          <div class="year_card3Echart margin-t-60" id="year_card3Echart"></div>
        </el-card>
      </div>
      <div class="flex-row width100 margin-t-20">
        <div class="margin-r-20">
          <el-card class="card5">
            <Title title="满意率、回复周期统计"></Title>
            <div class="padding-l-30 margin-t-40 flex-row row-between">
              <div
                class="orderStateItem border-right padding-r-50"
                v-for="(item, index) in orderState"
                :key="index"
              >
                <div class="font-14 text-gray">{{ item.title }}</div>
                <div class="font-46" :style="{ color: orderStateColor[index] }">
                  {{ item.number }}
                  <span class="font-14 text-gray line-block" v-if="index == 0"
                    >%</span
                  >
                  <span class="font-14 text-gray line-block" v-if="index == 1"
                    >天</span
                  >
                  <span class="font-14 text-gray line-block" v-if="index == 2"
                    >件</span
                  >
                </div>
                <lineProgress
                  class="margin-t-40"
                  :title="item.add ? '环比上年增长' : '环比上年下降'"
                  :percentage="
                    item.number > 0 ? Math.round(item.percentage) : 0
                  "
                  :showtext="false"
                  :showtextVal="item.number > 0 ? item.showtextVal : '0'"
                  :strokeWidth="10"
                  titleColor="#5673ca"
                  :percentageColor="item.percentageColor"
                  :icon="item.icon"
                ></lineProgress>
              </div>
            </div>
          </el-card>
          <el-card class="card6 margin-t-20">
            <div class="cardTitleBox rela">
              <Title title="重复事件统计"></Title>
              <div
                class="cardMore text-dark-gray font-12 abso pointer"
                @click="maskToggle"
              >
                更多<i class="el-icon-d-arrow-right"></i>
              </div>
            </div>
            <div class="hotEvents padding-l-20 padding-r-20 margin-t-40">
              <template v-for="(item, index) in repeatList">
                <div
                  class="hotEventsItem rela pointer"
                  :key="index"
                  v-if="index < 6"
                  @mouseover="repeatMouseover(index)"
                  @mouseout="repeatMouseout"
                  @click="orderListChange('year', '', item.sjh)"
                >
                  <lineProgress1
                    class="margin-t-10"
                    :title="item.title"
                    :number="item.number"
                    :percentage="
                      Math.round((item.number / (maxReplat + 10)) * 100)
                    "
                    :roundLeft="1"
                    :showtext="false"
                    :strokeWidth="10"
                  ></lineProgress1>
                  <div
                    class="repeatContentBox abso text-white"
                    v-if="replatShowIndex == index && !maskShow"
                  >
                    <div class="text-line-cut repeatContent">
                      {{ item.content }}
                    </div>
                    <div class="sanjiao_down abso"></div>
                  </div>
                </div>
                <!-- <div class="text-dark-gray font-14 text-center" style="margin-top: 150px;" v-if="repeatList==''">
									暂无数据
								</div> -->
              </template>
            </div>
          </el-card>
        </div>
        <div class="">
          <el-card class="card7">
            <Title title="不满意事件分析"></Title>
            <div class="card7Content">
              <div class="font-18 text-gray margin-t-40">按办理内容统计</div>
              <div class="flex-row">
                <div class="year_card7Echart" id="year_card7Echart1"></div>
                <div class="card7EchartList">
                  <div
                    class="card7EchartItem flex-row pointer"
                    :class="index > 0 ? 'margin-t-20' : ''"
                    v-for="(item, index) in card7Data[0]"
                    :key="index"
                    @click="routerToList(item, card7Data[0], 'nr')"
                  >
                    <div
                      class="
                        card7EchartItem_l
                        font-12
                        padding-l-20
                        rela
                        text-gray text-cut
                      "
                    >
                      <span
                        class="abso"
                        :class="{
                          'bg-light-blue': index == 0,
                          'bg-pink': index == 1,
                          'bg-violet': index == 2,
                          'bg-light-gray': index == 3,
                          'bg-light-purple': index == 4
                        }"
                      ></span
                      >{{ item.majorCatName }}
                    </div>
                    <div class="card7EchartItem_c font-14 text-right text-gray">
                      <span
                        class="font-24 line-block text-right"
                        :class="{
                          'text-light-blue': index == 0,
                          'text-pink': index == 1,
                          'text-violet': index == 2,
                          'text-light-gray': index == 3,
                          'text-light-purple': index == 4
                        }"
                        >{{ item.count }}</span
                      >件
                    </div>
                    <div class="card7EchartItem_r font-12">{{ item.pct }}%</div>
                  </div>
                </div>
              </div>
              <div class="font-18 text-gray margin-t-20">按办理部门统计</div>
              <div class="flex-row">
                <div class="year_card7Echart" id="year_card7Echart2"></div>
                <div class="card7EchartList">
                  <div
                    class="card7EchartItem flex-row pointer"
                    :class="index > 0 ? 'margin-t-20' : ''"
                    v-for="(item, index) in card7Data[1]"
                    :key="index"
                    @click="routerToList(item, card7Data[1], 'sq')"
                  >
                    <div
                      class="
                        card7EchartItem_l
                        font-12
                        padding-l-20
                        rela
                        text-gray text-cut
                      "
                    >
                      <span
                        class="abso"
                        :class="{
                          'bg-light-blue': index == 0,
                          'bg-pink': index == 1,
                          'bg-violet': index == 2,
                          'bg-light-gray': index == 3,
                          'bg-light-purple': index == 4
                        }"
                      ></span
                      >{{ item.deptName }}
                    </div>
                    <div class="card7EchartItem_c font-14 text-right text-gray">
                      <span
                        class="font-24 line-block text-right"
                        :class="{
                          'text-light-blue': index == 0,
                          'text-pink': index == 1,
                          'text-violet': index == 2,
                          'text-light-gray': index == 3,
                          'text-light-purple': index == 4
                        }"
                        >{{ item.count }}</span
                      >件
                    </div>
                    <div class="card7EchartItem_r font-12">{{ item.pct }}%</div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="moude2">
      <!-- 全年月度工单处理量统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card8Box width100 rela">
          <Title title="全年月度工单处理量统计"></Title>
          <div class="text-gray font-12 company abso">单位：件</div>
          <div class="year_card8Echart" id="year_card8Echart"></div>
        </el-card>
      </div>
      <!-- 全年月度退单量统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card9Box width100 rela">
          <Title title="全年月度退单量统计"></Title>
          <div class="text-gray font-12 company abso">单位：件</div>
          <div class="year_card9Echart" id="year_card9Echart"></div>
        </el-card>
      </div>
      <!-- 超期件月度统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card11Box width100 rela">
          <Title title="全年月度超期件统计"></Title>
          <div class="text-gray font-12 company abso">单位：件</div>
          <div class="year_card11Echart" id="year_card11Echart"></div>
        </el-card>
      </div>
    </div>
    <!-- 重复事件更多 -->
    <div class="maskBox" v-if="maskShow">
      <div class="maskContentBox bg-white rela padding-trbl-20">
        <div class="closeMask abso pointer" @click="maskToggle">
          <i class="el-icon-close"></i>
        </div>
        <div class="maskContent margin-t-40">
          <div class="hotEvents margin-l-30 margin-t-30 margin-r-30">
            <div
              class="text-dark-gray font-14 text-center"
              style="margin-top: 100px"
              v-if="repeatList == ''"
            >
              暂无数据
            </div>
            <template v-for="(item, index) in repeatList">
              <div
                class="hotEventsItem rela pointer"
                :key="index"
                @mouseover="repeatMouseover(index)"
                @mouseout="repeatMouseout"
                @click="orderListChange('year', '', item.sjh)"
              >
                <lineProgress1
                  class="margin-t-10"
                  :title="item.title"
                  :number="item.number"
                  :percentage="
                    Math.round((item.number / (maxReplat + 5)) * 100)
                  "
                  :roundLeft="1"
                  :showtext="false"
                  :strokeWidth="10"
                ></lineProgress1>
                <div
                  class="repeatContentBox abso text-white"
                  v-if="replatShowIndex == index && maskShow"
                >
                  <div class="text-line-cut repeatContent">
                    {{ item.content }}
                  </div>
                  <div class="sanjiao_down abso"></div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <Pagination
          :totalSize="totalSize"
          :current="currentPage.current"
          :size="currentPage.size"
          @pageChange="currentPageChange"
          @sizeChange="currentSizeChange"
        ></Pagination>
      </div>
    </div>
    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      :visible.sync="orderListShow"
      width="100%"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :sourceId="sourceId"
        :nrlb="nrlb"
        :majorCatId="majorCatId"
        :deptId="deptId"
        :bumanyi="bumanyi"
        :sjh="sjh"
        :orderType="orderType"
        :orderDataType="orderDataType"
      ></orderList>
    </el-dialog>
  </div>
</template>
<script>
import Title from '../../../components/title.vue'
import lineProgress from '../../../components/lineProgress/lineProgress.vue'
import lineProgress1 from '../../../components/lineProgress/lineProgress1.vue'
import Pagination from '../../../components/pagination.vue'
import * as echarts from 'echarts'
import { sort, stopBodyScroll } from '../../../assets/js/public.js'
import orderList from './order/orderlist.vue'
export default {
  components: {
    Title,
    lineProgress,
    lineProgress1,
    Pagination,
    orderList
  },
  data () {
    return {
      card1Data: {
        total: {},
        list: []
      },
      lastMonth: 1,
      orderState: [],
      orderStateColor: ['#35ca1c', '#6d9fff', '#9865ff'],
      repeatList: [],
      replatSortArray: [],
      replatShowIndex: -1,
      maxReplat: 0,
      // 不满意件
      card7Data: [],
      monthList: [
        '01月',
        '02月',
        '03月',
        '04月',
        '05月',
        '06月',
        '07月',
        '08月',
        '09月',
        '10月',
        '11月',
        '12月'
      ],
      selectTimeVal: '',
      systemYear: '',
      pickerOptions: {
        disabledDate (time) {
          let startYear = '1577808000000'
          return time.getTime() > Date.now() || time.getTime() < startYear
        }
      },
      currentPage: {
        current: 1,
        size: 20
      },
      totalSize: 0,
      maskShow: false,
      maskType: '',
      orderListShow: false,
      fullScreen: true,
      sourceList: [
        { id: '10000', label: '市长信箱' },
        { id: '12306', label: '市人社局长信箱' },
        { id: '12333', label: '信访信息系统' },
        { id: '10010', label: '大联动' },
        { id: '12388', label: '人民网' },
        { id: '12580', label: '企业服务网' },
        { id: '10086', label: '公众信息网' }
      ],
      duration: null,
      date: null,
      sourceId: null,
      nrlb: null,
      deptId: null,
      majorCatId: null,
      bumanyi: null,
      sjh: null,
      orderType: null,
      orderDataType: 'nianbao'
    }
  },
  mounted () {
    const date = new Date()
    if (date.getMonth() == 0) {
      this.lastMonth = 12
    } else {
      this.lastMonth = date.getMonth() + 1
    }
    this.systemYear = date.getFullYear()
    this.selectTimeVal = date.getFullYear().toString()

    this.timeValChange()
  },
  methods: {
    // 办理总量
    async getGdBlTj () {
      let year = this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      const res = await this.$api.getMonthGdBlTj(year)
      this.card1Data = {
        total: {},
        list: []
      }
      res.forEach((item, index) => {
        if (item.type != 'TOTAL') {
          let obj = {
            type: item.type,
            title: item.typeName,
            number: item.count,
            percentage: item.pct > 2 ? item.pct : item.pct > 0 ? 2 : item.pct,
            proportion: item.pct
          }
          this.card1Data.list.push(obj)
        } else {
          let obj = {
            add: item.add,
            count: item.count,
            percentage: item.huanbiPct,
            huanbiPct: item.huanbiPct.toString()
          }
          this.card1Data.total = obj
        }
      })
    },
    // 获取数据 工单办理内容
    async getNrlb () {
      const that = this
      let year = this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      const res = await that.$api.getMonthNrlb(year)
      let data1 = []
      let data2 = []
      let data3 = []
      if (res != '') {
        res.forEach(item => {
          data1.push(item.majorCatName)
          data2.push(item.count)
          data3.push(item)
        })
      }
      const yb_chartDom1 = document.getElementById('year_card2Echart')
      const yb_myChart1 = echarts.init(yb_chartDom1)
      const yb_option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return (
              params[0].name +
              '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #8565ff;margin-right:5px;"></span>' +
              params[0].seriesName +
              '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
              params[0].value +
              '</span><span style="font-size: 10px;"> 件</span>'
            ) // 鼠标悬浮显示的字符串内容
          }
        },
        color: ['#8565ff'],
        grid: {
          left: '20px',
          right: '25px',
          bottom: '40px',
          top: '20px',
          containLabel: true
        },
        textStyle: {
          color: '#666'
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, // 标签设置为全部显示
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的字数
                var provideNumber = 6 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            max: function (value) {
              if (value.max == 0) {
                return 5
              }
            }
          }
        ],
        series: [
          {
            name: '总计',
            type: 'bar',
            barWidth: '24px',
            data: data2,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      yb_option1 && yb_myChart1.setOption(yb_option1)
      setTimeout(function () {
        window.onresize = function () {
          yb_myChart1.resize()
        }
      }, 100)
      yb_myChart1.on('click', function (param) {
        let nrlbArray = []
        if (param.name == '其他') {
          nrlbArray = data3.map(item => {
            return item.majorCatId
          })
          that.nrlb = nrlbArray.filter(Boolean)
        } else {
          nrlbArray = data3.map(item => {
            let ss = ''
            if (param.name == item.majorCatName) {
              ss = item.majorCatId
            }
            return ss
          })
          that.nrlb = nrlbArray.filter(Boolean).toString()
        }
        that.orderListChange('year')
      })
    },
    // 获取数据 部门办理量
    async getBmblTj_m () {
      const that = this
      let year = this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      const res = await that.$api.getBmblTj_m(year)
      let data = []
      let bumenList = []
      res.forEach(item => {
        data.push(item.count)
        bumenList.push(item.sqName)
      })
      const yb_chartDom2 = document.getElementById('year_card3Echart')
      const yb_myChart2 = echarts.init(yb_chartDom2)
      const yb_option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return (
              params[0].name +
              '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #8565ff";margin-right:5px;"></span>' +
              params[0].seriesName +
              '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
              params[0].value +
              '</span><span style="font-size: 10px;"> 件</span>'
            ) // 鼠标悬浮显示的字符串内容
          }
        },
        color: ['#8565ff'],
        grid: {
          left: '10px',
          right: '10px',
          bottom: '40px',
          top: '20px',
          containLabel: true
        },
        textStyle: {
          color: '#666'
        },
        xAxis: [
          {
            type: 'category',
            data: bumenList,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, // 标签设置为全部显示
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的字数
                var provideNumber = 10 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            max: function (value) {
              if (value.max == 0) {
                return 5
              }
            }
          }
        ],
        series: [
          {
            name: '总计',
            type: 'bar',
            barWidth: '24px',
            data: data,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      yb_option2 && yb_myChart2.setOption(yb_option2)
      setTimeout(function () {
        window.onresize = function () {
          yb_myChart2.resize()
        }
      }, 100)
      yb_myChart2.on('click', function (param) {
        res.forEach(item => {
          if (param.name == item.sqName) {
            that.deptId = item.sqId
          }
        })
        that.orderListChange('year')
      })
    },
    // 获取数据 满意率、回复率
    async getGdqktj () {
      let year = this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      const res = await this.$api.getMonthGdqktj(year)
      this.orderState = [
        {
          title: '满意率',
          number: res.curMydPct,
          percentage: res.hbqnMydYPct,
          showtextVal: res.hbqnMydYPct.toString(),
          add: res.addMydY,
          percentageColor: res.addMydY ? '#35ca1c' : '#ff3a3a',
          icon: res.addMydY ? 'rise' : 'decline'
        },
        {
          title: '平均回复周期',
          number: res.curAvgHf,
          percentage: res.hbqnAvgHfYPct,
          showtextVal: res.hbqnAvgHfYPct.toString(),
          add: res.addAvgHfY,
          percentageColor: res.addAvgHfY ? '#ff3a3a' : '#35ca1c',
          icon: res.addAvgHfY ? 'rise3' : 'decline3'
        },
        {
          title: '环比转办量',
          number: res.curThlPct,
          percentage: res.hbqnThlYPct,
          showtextVal: res.hbqnThlYPct.toString(),
          add: res.addThlY,
          percentageColor: res.addThlY ? '#35ca1c' : '#ff3a3a',
          icon: res.addThlY ? 'rise' : 'decline'
        }
      ]
    },
    // 获取数据 不满意事件统计
    async getBmytj () {
      const that = this
      let year = this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      const res = await this.$api.getMonthBmytj(year)
      this.card7Data = res
      let date1 = []
      let date2 = []
      let date3 = []
      let number1 = 0
      let number2 = 0
      res[0].forEach(item => {
        let obj = {
          value: item.count,
          name: item.majorCatName,
          majorCatId: item.majorCatId
        }
        number1 += parseInt(item.count)
        date1.push(obj)
        date3.push(item)
      })
      res[1].forEach(item => {
        number2 += parseInt(item.count)
        let obj = {
          value: item.count,
          name: item.deptName,
          deptId: item.deptId
        }
        date2.push(obj)
      })
      // 按办理内容统计
      const yb_chartDom3 = document.getElementById('year_card7Echart1')
      const yb_myChart3 = echarts.init(yb_chartDom3)
      const yb_option3 = {
        title: [
          {
            text: '不满意件总数',
            x: 'center',
            top: '42%',
            textStyle: {
              color: 'black',
              fontSize: 20,
              fontWeight: '100'
            }
          },
          {
            text: number1,
            x: 'center',
            top: '60%',
            textStyle: {
              fontSize: 30,
              color: '#3584f3',
              foontWeight: '500'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '0',
          left: 'right',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            name: '工单内容类别',
            color: ['#6d9fff', '#df87ff', '#8565ff', '#e1e2e3', '#c49ef9'],
            radius: ['70%', '95%'],
            avoidLabelOverlap: false,
            legendHoverLink: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: date1
          }
        ]
      }
      yb_option3 && yb_myChart3.setOption(yb_option3)
      yb_myChart3.on('click', function (param) {
        if (param.name == '其他') {
          let nrlbArray = date3.map(item => {
            return item.majorCatId
          })
          that.nrlb = nrlbArray.filter(Boolean)
        } else {
          date1.map(item => {
            if (item.name == param.name) {
              that.nrlb = item.majorCatId
            }
          })
        }
        that.bumanyi = true
        that.orderListChange('year')
      })

      // 按办理部门统计
      const yb_chartDom4 = document.getElementById('year_card7Echart2')
      const yb_myChart4 = echarts.init(yb_chartDom4)
      const yb_option4 = {
        title: [
          {
            text: '不满意件总数',
            x: 'center',
            top: '42%',
            textStyle: {
              color: 'black',
              fontSize: 20,
              fontWeight: '100'
            }
          },
          {
            text: number2,
            x: 'center',
            top: '60%',
            textStyle: {
              fontSize: 30,
              color: '#3584f3',
              foontWeight: '500'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '0',
          left: 'right',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            name: '办理部门',
            color: ['#6d9fff', '#df87ff', '#8565ff', '#e1e2e3', '#c49ef9'],
            radius: ['70%', '95%'],
            avoidLabelOverlap: false,
            legendHoverLink: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: date2
          }
        ]
      }
      yb_option4 && yb_myChart4.setOption(yb_option4)
      setTimeout(function () {
        window.onresize = function () {
          yb_myChart3.resize()
          yb_myChart4.resize()
        }
      }, 100)
      yb_myChart4.on('click', function (param) {
        if (param.name == '其他') {
          let nrlbArray = date4.map(item => {
            return item.majorCatId
          })
          that.deptId = nrlbArray.filter(Boolean)
        } else {
          date2.map(item => {
            if (item.name == param.name) {
              that.deptId = item.deptId
            }
          })
        }
        that.bumanyi = true
        that.deptId = param.data.deptId
        that.orderListChange('year')
      })
    },
    routerToList (item, data, type) {
      if (type == 'nr') {
        if (item.majorCatName == '其他') {
          let idArr = data.map(Dataitem => {
            return Dataitem.majorCatId
          })
          this.majorCatId = idArr.filter(Boolean)
        } else {
          this.majorCatId = item.majorCatId
        }
        console.log(this.majorCatId)
      } else {
        if (item.majorCatName == '其他') {
          let idArr = data.map(Dataitem => {
            return Dataitem.deptId
          })
          this.deptId = idArr.filter(Boolean)
        } else {
          this.deptId = item.deptId
        }
      }
      this.bumanyi = true
      this.orderListChange('year')
    },
    // 获取数据 重复事件统计
    async getRepeat () {
      let duration =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : this.systemYear
      const res = await this.$api.getMonthRepeat(duration, this.currentPage)
      if (this.currentPage.current == 1) {
        this.repeatList = []
        this.replatSortArray = []
      }
      res.records.forEach(item => {
        let obj = {
          ldr: item.ldr,
          sjh: item.sjh,
          content: item.content,
          title: item.ldr + ' ' + item.sjh + ' - ' + item.content,
          number: item.count
        }
        this.repeatList.push(obj)
        this.replatSortArray.push(item.count)
      })
      this.maxReplat = sort(this.replatSortArray)[0]
      this.totalSize = res.total
    },
    // 获取数据 全年月度工单处理量
    async getGdMonthForYear () {
      const that = this
      let year = that.selectTimeVal != '' ? that.selectTimeVal : that.systemYear
      const res = await this.$api.getHomeGdMonthForYear(year)
      // 全年月度工单处理量统计
      const sy_chartDom3 = document.getElementById('year_card8Echart')
      const sy_myChart3 = echarts.init(sy_chartDom3)
      const sy_option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#8e5dff'
            }
          },
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#a0c1ff', '#cb501d']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;"> 件</span>'
            })
            return res
          }
        },
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 10, // 设置宽度class
          itemHeight: 10, // 设置高度im
          itemGap: 40 // 设置间距i
        },
        grid: {
          left: '25px',
          right: '20px',
          bottom: '10px',
          top: '70px',
          containLabel: true
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#967dfd' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#9fd6fd' // 50% 处的颜色
              },
              {
                offset: 1,
                color: '#9cfeff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#cb501d' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#cf14a6' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 5
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          offset: 10,
          data: this.monthList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: res[0].year + '年',
            type: 'line',
            data: res[0].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(204, 71, 49,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          },
          {
            name: res[1].year + '年',
            type: 'line',
            data: res[1].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(204, 71, 49,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      sy_option3 && sy_myChart3.setOption(sy_option3)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart3.resize()
        }
      }, 100)
      sy_myChart3.on('click', function (param) {
        that.duration = 'month'
        let date =
          param.seriesName.slice(0, param.seriesName.length - 1) +
          '-' +
          param.name.slice(0, 2)
        that.date = date
        that.orderListShow = true
      })
    },
    // 获取数据 全年月度退单量统计
    async getTdlMonthForYear () {
      const that = this
      let year = this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      const res = await this.$api.getHomeTdlMonthForYear(year)
      const sy_chartDom4 = document.getElementById('year_card9Echart')
      const sy_myChart4 = echarts.init(sy_chartDom4)
      const sy_option4 = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#97c0f6', '#7773d4']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;"> 件</span>'
            })
            return res
          }
        },
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 10, // 设置宽度class
          itemHeight: 10, // 设置高度im
          itemGap: 40, // 设置间距i
          itemStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 5
          }
        },
        grid: {
          left: '25px',
          right: '20px',
          bottom: '10px',
          top: '70px',
          containLabel: true
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#22cfbd52' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#22cfbd' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#7773d44d' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#7773d4' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          offset: 10,
          data: this.monthList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: res[0].year + '年',
            type: 'line',
            data: res[0].tdl,
            smooth: true,
            symbolSize: 6,
            lineStyle: {
              width: 4,
              shadowColor: 'rgba(123, 184, 246, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#13b5b7'
            }
          },
          {
            name: res[1].year + '年',
            type: 'line',
            data: res[1].tdl,
            smooth: true,
            symbolSize: 6,
            lineStyle: {
              width: 4,
              shadowColor: 'rgba(123, 184, 246, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#13b5b7'
            }
          }
        ]
      }
      sy_option4 && sy_myChart4.setOption(sy_option4)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart4.resize()
        }
      }, 100)
      sy_myChart4.on('click', function (param) {
        that.duration = 'month'
        let date =
          param.seriesName.slice(0, param.seriesName.length - 1) +
          '-' +
          param.name.slice(0, 2)
        that.date = date
        that.orderType = 'tuihui'
        that.orderListShow = true
      })
    },
    // 获取数据 超期件月度统计
    async getCqjMonthForYear () {
      const that = this
      let year = that.selectTimeVal != '' ? that.selectTimeVal : that.systemYear
      const res = await this.$api.getHomeCqjMonthForYear(year)
      const sy_chartDom6 = document.getElementById('year_card11Echart')
      const sy_myChart6 = echarts.init(sy_chartDom6)
      const sy_option6 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#8e5dff'
            }
          },
          formatter: function (params) {
            let res = params[0].seriesName
            const colorList = ['#7773d5']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.name +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;">件</span>'
            })
            return res
          }
        },
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'roundRect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemGap: 40 // 设置间距i
        },
        xAxis: {
          data: that.monthList,
          offset: 10,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false }
        },
        yAxis: {},
        color: ['#7773d5'],
        grid: {
          left: '25px',
          right: '25px',
          bottom: '20px',
          top: '70px',
          containLabel: true
        },
        series: [
          {
            name: res[1].year + '年',
            type: 'bar',
            stack: 'one',
            data: res[1].data,
            barWidth: '30px',
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#7773d5'
            }
          }
        ]
      }
      sy_option6 && sy_myChart6.setOption(sy_option6)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart6.resize()
        }
      }, 100)
      sy_myChart6.on('click', function (param) {
        that.duration = 'month'
        let date = that.systemYear + '-' + param.name.slice(0, 2)
        that.date = date
        that.orderType = 'chaoqiwancheng'
        that.orderListShow = true
      })
    },
    timeValChange () {
      this.getGdBlTj()
      this.getNrlb()
      this.getBmblTj_m()
      this.getGdqktj()
      this.getBmytj()
      this.getRepeat()
      this.getGdMonthForYear()
      this.getTdlMonthForYear()
      this.getCqjMonthForYear()
    },
    repeatMouseover (index) {
      this.replatShowIndex = index
    },
    repeatMouseout () {
      this.replatShowIndex = -1
    },
    currentPageChange (page) {
      this.currentPage.current = page
      this.getRepeat()
    },
    currentSizeChange (size) {
      this.currentPage.size = size
      this.getRepeat()
    },
    maskToggle () {
      this.maskShow = !this.maskShow
      if (this.maskShow) {
        this.getRepeat()
        stopBodyScroll(true)
      } else {
        stopBodyScroll(false)
      }
    },
    orderListChange (duration, sourceName, sjh) {
      // 年月日类型
      this.duration = duration
      // 时间
      this.date =
        this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      // 工单来源
      this.sourceList.forEach(item => {
        if (sourceName === item.label) {
          this.sourceId = item.id
        }
      })
      // 手机号
      this.sjh = sjh
      this.orderListShow = true
    },
    clearSearch () {
      this.duration = null
      this.date = null
      this.sourceId = null
      this.nrlb = null
      this.deptId = null
      this.majorCatId = null
      this.bumanyi = null
      this.sjh = null
      this.orderType = null
    }
  }
}
</script>
<style lang="less" scoped>
.searchBox {
  height: 60px;
  line-height: 60px;
  background: #e5f1fb;
  padding: 0 30px 0 20px;
  .search_l_bg {
    width: 6px;
    left: 0;
    top: 0;
    height: 100%;
  }
  .resetBtn {
    width: 90px;
    height: 36px;
  }
}
.el-card {
  width: 100%;
  height: 100%;
}
.moude1 {
  .card1 {
    width: 840px;
    height: 460px;
    .card1Content {
      .card1Content_l {
        width: 280px;
        .el-progress {
          width: 180px;
        }
        .categoryIcon {
          vertical-align: bottom;
        }
        .line {
          width: 1px;
          height: 180px;
          right: -50px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .card1Content_r {
        width: 450px;
      }
      .card1DataList {
        .card1Line {
          width: 1px;
          height: 150px;
          background: #f5f5f5;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .el-progress {
          width: 200px;
        }
        .progressInfo {
          color: #656d92;
          .company {
            width: 60px;
            white-space: nowrap;
          }
          .proportion {
            width: 120px;
            span {
              width: 60px;
            }
          }
        }
      }
    }
  }
  .card2 {
    width: 820px;
    height: 460px;
    .company {
      top: 60px;
      left: 30px;
    }
    .year_card2Echart {
      width: 780px;
      height: 400px;
    }
  }
  .card4 {
    height: 410px;
    .company {
      top: 60px;
      left: 30px;
    }
    .year_card3Echart {
      width: 1620px;
      height: 320px;
    }
  }
  .card5 {
    width: 910px;
    height: 280px;
    .orderStateItem {
      width: calc(100% - 250px / 3);
      padding-left: 50px;
    }
    .orderStateItem:first-child {
      padding-left: 0;
    }
  }
  .card6 {
    width: 910px;
    height: 450px;
    overflow: visible;
    .hotEventsItem {
      margin-top: 20px;
      .repeatContentBox {
        bottom: 40px;
        .repeatContent {
          -webkit-line-clamp: 15;
        }
        .sanjiao_down {
          border-top: 20px solid rgba(0, 0, 0, 0.8);
        }
      }
    }
    .hotEventsItem:firsf-child {
      margin-top: 0;
    }
  }
  .card7 {
    width: 750px;
    height: 750px;
    .card7Content {
      padding-left: 15px;
      .year_card7Echart {
        width: 220px;
        height: 220px;
        margin: 20px 40px 40px 40px;
      }
      #card7Echart2 {
        margin-bottom: 0;
      }
      .card7EchartList {
        padding-right: 100px;
        .card7EchartItem_l {
          width: 180px;
          span {
            display: inline-block;
            width: 13px;
            height: 13px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .card7EchartItem_c {
          min-width: 90px;
          margin-left: 20px;
          margin-right: 20px;
          span {
            margin-right: 6px;
          }
        }
        .card7EchartItem_r {
          color: #4280ff;
        }
      }
    }
  }
  .cardTitleBox .cardMore {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.moude2 {
  .card8Box,
  .card9Box,
  .card11Box {
    height: 500px;
    .year_card8Echart,
    .year_card9Echart,
    .year_card11Echart {
      width: 1620px;
      height: 430px;
    }
  }
  .company {
    left: 50px;
    top: 60px;
  }
}
.maskBox {
  .closeMask {
    right: 10px;
    top: 10px;
    .el-icon-close {
      font-size: 32px;
    }
  }
  .maskContent {
    height: 90%;
    overflow-y: scroll;
    .hotEventsItem {
      .repeatContentBox {
        z-index: 999;
        .repeatContent {
          -webkit-line-clamp: 6;
        }
        .sanjiao_down {
          top: -20px;
          border-bottom: 20px solid rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
}
</style>
